<template>
  <div class="base-mine">
    <div class="title">个人信息</div>
    <div class="info-card">
      <van-row>
        <van-col span="12">姓名：{{ userInfo.name }}</van-col>
        <van-col span="12">性别：{{ userInfo.sex === 1 ? "男" : "女" }}</van-col>
        <van-col span="24">身份证号：{{ userInfo.idcard }}</van-col>
        <van-col span="12">电话：{{ userInfo.tel }}</van-col>
        <van-col span="12">职工号：{{ userInfo.wid }}</van-col>
        <van-col span="12">集团号：{{ userInfo.gro }}</van-col>
        <van-col span="12">站段号：{{ userInfo.station }}</van-col>
        <van-col span="12">车间号：{{ userInfo.shop }}</van-col>
        <van-col span="12">岗位：{{ userInfo.job }}</van-col>
      </van-row>
      <!-- <div v-else style="text-align: center; font-size: 14px;">未认证，暂无数据</div> -->
    </div>
    <div class="title">认证状态</div>
      <div class="certificate-status"
        :style="{
          color: certificateList[certificateStatus].color,
          backgroundColor: certificateList[certificateStatus].backgroundColor,
        }"
      >
        {{ certificateList[certificateStatus].text }}
      </div>
    <div class="title">签约进度</div>
    <div
      class="sign-class"
      :style="{
        color: signList[signStatus].color,
        backgroundColor: signList[signStatus].backgroundColor,
      }"
    >
      {{ signList[signStatus].text }}
    </div>
    <van-steps direction="vertical" :active="signProcess">
      <van-step>提交申请申请</van-step>
      <van-step>职工所在单位</van-step>
      <van-step>管理单位助管科室</van-step>
      <van-step>管理单位领导审批</van-step>
      <van-step>公寓车间</van-step>
    </van-steps>
    <van-button round block type="danger" @click="logout">退出登陆</van-button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

const certificateList = [
  { text: '认证成功', color: '#1da379', backgroundColor: '#e8f5f1' },
  { text: '待审核', color: '#ffa850', backgroundColor: '#fff6ed' },
  { text: '重新认证', color: '#f04545', backgroundColor: '#fdecec' },
  { text: '', color: '#fff', backgroundColor: '#fff' },
];

const signList = [
  { text: '审核通过', color: '#1da379', backgroundColor: '#e8f5f1' },
  { text: '待审核', color: '#ffa850', backgroundColor: '#fff6ed' },
  { text: '审核不通过', color: '#f04545', backgroundColor: '#fdecec' },
  { text: '未发起签约', color: '#000', backgroundColor: '#fff' },
];

export default {
  name: "mine",
  data() {
    return {
      userInfo: {},
      // 认证状态
      certificateStatus: 3,
      // 签约进度
      signProcess: -1,
      // 房源审核状态
      signStatus: 3,
    };
  },
  created () {
    this.certificateList = certificateList;
    this.signList = signList;
  },
  mounted() {
    this.HttpManager.users_statecer(sessionStorage.getItem("userid")).then((cerRes) => {
      this.userInfo = cerRes.data;
    });
    this.HttpManager.getCertificate(sessionStorage.getItem("userid")).then(res => {
      this.certificateStatus = res.data.state;
    });
    this.HttpManager.getApplyBuildingStatus(sessionStorage.getItem("userid")).then(res => {
      this.signProcess = res.data.checkstatus;
      this.signStatus = res.data.state;
      if (this.signStatus === 0) {
        this.signProcess = 5;
      }
    });
  },
  methods: {
    ...mapMutations([
      'clearUserInfo',
    ]),
    logout() {
      sessionStorage.removeItem("userid"),
      this.clearUserInfo();
      this.$router.push("login");
    }
  }
};
</script>

<style lang="less" scoped>
.base-mine {
  .info-card {
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 14px 0 rgba(0, 43, 93, 0.13);
    margin: 0 10px 20px 10px;
    padding: 10px;

    .van-col {
      margin-bottom: 10px;
      font-size: 14px;
    }
  }

  .van-steps {
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 2px 0 rgba(0, 43, 93, 0.13);
    margin: 0 10px 20px 10px;
  }

  .certificate-status {
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 14px 0 rgba(0, 43, 93, 0.13);
    margin: 0 10px 20px 10px;
    text-align: center;
    line-height: 36px;
    height: 36px;
  }

  .sign-class {
    margin: 0 10px;
    text-align: center;
    line-height: 36px;
    height: 36px;
    box-shadow: 0 2px 2px 0 rgba(0, 43, 93, 0.13);
  }

  .title {
    background-color: #ffa850;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    margin: 0 10px;
    border-radius: 16px 16px 0 0;
    line-height: 32px;
    height: 32px;
  }

  .van-button--normal {
    font-size: 18px;
    margin: 0 10px;
    width: calc(100% - 20px);
  }
}
</style>
